<template>
	<view id="gold">
		<!-- 头部 -->
		<view class="gold-background">
			<view class="gold-paice">
				<text>{{details.currentFundInfo.sevenDaysYearIncome}}</text>
			</view>
			<view class="gold-newest">七日年化收益率(%)</view>

			<view class="gold-Decline">
				<view class="gold-item">
					<text class="item-text">{{details.currentFundInfo.millionCopiesIncome}}</text><br>
					<text class="item-texttwo">万份收益(03-07)</text>
				</view>
				<view class="gold-item">
					<text class="item-text">{{details.currentFundInfo.buyMin}}</text><br>
					<text class="item-texttwo">起购价格(元)</text>
				</view>
			</view>
		</view>

		<!-- 活期走势 -->
		<view class="gold-trend">
			<!-- 活期走势标题 -->
			<view class="exclusive-title">
				<view>
					<view class="title-box"></view>
					<view class="title">七日年化收益曲线</view>
				</view>
				<image src="https://z3.ax1x.com/2021/04/23/cX0aFO.png" mode="" class="title-log"></image>
			</view>

			<!-- 折线图 -->
			<view class="zxt">
				<slide-in-left class="zhxiantu">
					<qiun-data-charts  type="line" :chartData="zxt" background="none" :animation="false"
						:ontouch="true" />
				</slide-in-left>
				<view class="xuanze">
					<view class="fenlei" :class="{active:item._id==Time}" v-for="item in TimeSharing" :key="item._id"
						@tap="changeTime(item)">{{item.name}}</view>
				</view>
			</view>

			<!-- 基本信息 -->
			<!-- 交易规则，信息披露，常见问题 -->
			<view class="information">

				<view class="information-item" v-for="item in information" :key="item._id">
					<text class="information-text" :class="{informationText:item.name==informationActive}"
						@tap="switchData(item.name)">{{item.name}}</text>
					<view :class="{informationActive:item.name==informationActive}" @tap="switchData"></view>
				</view>

			</view>

			<!-- 交易规则 -->
			<view class="" v-if="informationActive=='交易规则'">
				<view class="essential-information">
					<view class="essential-titll">
						<text class="titll-text">购买与领取</text>
					</view>

					<view class="essential-vice-titll">
						<view class="vice-titll">购买金额</view>
						<view class="vice-text"></view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">年龄范围</view>
						<view class="vice-text"></view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">领取金额</view>
						<view class="vice-text no-line"></view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">资金到账</view>
						<view class="vice-text"></view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">交易时间</view>
						<view class="vice-text no-line"></view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">兑换实金</view>
						<view class="vice-text no-line"></view>
					</view>

				</view>
				<!-- 收益与费用 -->
				<view class="agreement">
					<view class="essential-titll">
						<text class="titll-text">收益与费用</text>
					</view>

					<view class="essential-vice-titll">
						<view class="vice-titll">生息规则</view>
						<view class="vice-text"></view>
					</view>

					<view class="essential-vice-titll">
						<view class="vice-titll">费用规则</view>
						<view class="vice-text"></view>
					</view>

				</view>
			</view>

			<!-- 基金档案 -->
			<!-- 基本信息 -->
			<view class="essential-information" v-if="informationActive=='基金档案'">
				<view class="essential-titll">
					<text class="titll-text">基本信息</text>
				</view>

				<view class="essential-vice-titll">
					<view class="vice-titll">基金全称</view>
					<view class="vice-text">{{details.currentFundInfo.name}}</view>
				</view>
				<view class="essential-vice-titll">
					<view class="vice-titll">基金代码</view>
					<view class="vice-text">{{details.currentFundInfo.code}}</view>
				</view>
				<view class="essential-vice-titll">
					<view class="vice-titll">基金类型</view>
					<view class="vice-text">{{details.currentFundInfo.type}}（低风险）</view>
				</view>
				<view class="essential-vice-titll">
					<view class="vice-titll">基金状态</view>
					<view v-if='details.currentFundInfo.status==1' class="vice-text">{{status.a}}</view>
					<view v-else class="vice-text">{{status.b}}</view>
				</view>

				<view class="essential-vice-titll">
					<view class="vice-titll">成立日期</view>
					<view class="vice-text">{{details.currentFundInfo.dateOfEstablishment}}</view>
				</view>
				<view class="essential-vice-titll">
					<view class="vice-titll">基金公司</view>
					<view class="vice-text">{{details.currentFundInfo.company}}</view>
				</view>
				<view class="essential-vice-titll">
					<view class="vice-titll">总规模</view>
					<view class="vice-text">{{details.currentFundInfo.fundScale}}份</view>
				</view>
				<view class="essential-vice-titll">
					<view class="vice-titll">总资产</view>
					<view class="vice-text">{{details.currentFundInfo.totalScale}}元</view>
				</view>

			</view>

			<!-- 常见问题 -->
			<view class="essential-information problem-active" v-if="informationActive=='常见问题'">

				<view class="problem">
					<text class="problem-questions">什么是基金？</text>
				</view>
				<view class="problem-tips">
					<text
						class="problem-text">基金(全称证券投资基金)是一款以组合方式进行投资的集合投资产品。投资人通过购买基金份额的方式，将众多资金集中起来，交由具备专业资质的基金管理人进行资产管理，并依据其持有份额共享利益，共担风险</text>
				</view>
				<view class="problem">
					<text class="problem-questions">基金是什么？</text>
				</view>
				<view class="problem-tips">
					<text
						class="problem-text">基金(全称证券投资基金)是一款以组合方式进行投资的集合投资产品。投资人通过购买基金份额的方式，将众多资金集中起来，交由具备专业资质的基金管理人进行资产管理，并依据其持有份额共享利益，共担风险</text>
				</view>

			</view>


			<view class="tishi">
				<view class="ts1">基金销售服务由成都宇宁基金销售有限公司提供</view>
				<view class="ts2">投资前请详细阅读基金合同，招募说明书。基金的过往业绩
					不预示其未来表现，市场有风险，投资需谨慎
				</view>
			</view>
			<button v-if='details.currentFundInfo.status==1' class="purchase" @click="buynow()">立即购买</button>
			<button v-else class="purchase2" @click="buynow2">基金已下架</button>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers(
		"current"
	);
	const {
		mapState: mapState1,

	} = createNamespacedHelpers(
		"UserInfor"
	);
	export default {
		data() {
			return {
				//接收折线图数据
				currents: [],
				zxt: {
					"categories": [],
					"series": []
				},

				//渲染上架与下架基金状态
				status: {
					a: '开放交易',
					b: '暂停交易'
				},

				//接收基金详情数据
				details: {},


				Time: 1,
				TimeSharing: [{
						_id: 1,
						name: '近一月',
					},
					{
						_id: 2,
						name: '近三月'
					},
					{
						_id: 3,
						name: '近半年'
					},
					{
						_id: 4,
						name: '近一年'
					}
				],

				information: [{
						_id: 1,
						name: "基金档案"
					},
					{
						_id: 2,
						name: "交易规则"
					},
					{
						_id: 3,
						name: "常见问题"
					}
				],
				informationActive: "基金档案"
			}
		},
		computed: {
			...mapState1(['userData'])
		},
		methods: {
			...mapActions(['getListById']),
			///点击事件修改金价走势图近一月
			changeTime(item) {
				this.Time = item._id
				this.see(item._id)
			},
			
			// 点击修改状态
			see(value) {
				if (value == 1) {
					//X轴
					// console.log(this.currents.data.lineData);
					this.zxt.categories = this.currents.data.lineData[0].categories.filter((item, index) => {
						return index % 8 == 0
					})
					//Y轴
					this.zxt.series = this.currents.data.lineData[0].series
				} else if (value == 2) {
					this.zxt.categories = this.currents.data.lineData[1].categories.filter((item, index) => {
						return index % 25 == 0
					})
					this.zxt.series = this.currents.data.lineData[1].series
				} else if (value == 3) {
					this.zxt.categories = this.currents.data.lineData[2].categories.filter((item, index) => {
						return index % 50 == 0
					})
					this.zxt.series = this.currents.data.lineData[2].series
				} else {
					this.zxt.categories = this.currents.data.lineData[3].categories.filter((item, index) => {
						return index % 90 == 0
					})
					this.zxt.series = this.currents.data.lineData[3].series
				}
			},
			switchData(val) {
				this.informationActive = val
			},
			buynow() {
				//判断是否登陆，token
				if (this.userData.token) {
					//跳转立即购买
					uni.navigateTo({
						url: '../buynow/buynow?buyMin=' + this.details.currentFundInfo.buyMin+
						'&chanping=' + '活期'
					})
				} else {
					uni.showToast({
						title: '您还未登录，请先登录',
						duration: 2000,
						icon:"none"
					},uni.navigateTo({
						url: '../login/login'
					}))
					
				}

			},
			
			buynow2() {
				uni.showToast({
					title: '商品已下架',
					duration: 2000,
					icon:"none"
				})
				//跳转活期列表
				uni.navigateTo({
					url: "../current/current"
				})
			}
		},
		async onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			const data = await this.getListById(option.id)
			if (data.code == 200) {
				this.currents = data
				// console.log(data.data);
				// console.log(data.data.lineData)
				this.details = data.data
				//默认渲染一个月的折线图
				this.zxt.categories = data.data.lineData[0].categories.filter((item, index) => {
					return index % 8 == 0
				})
				this.zxt.series = data.data.lineData[0].series
			}
		}
	}
</script>

<style>
	#gold {
		position: relative;
	}

	.gold-background {
		width: 100%;
		height: 400rpx;
		/* border: 1px solid red; */
		background: url('https://z3.ax1x.com/2021/04/29/gkGfNn.png') no-repeat;
		background-size: 100% 430rpx;
		position: relative;
	}

	.gold-paice {
		width: 100%;
		height: auto;
		/* border: 1px solid red; */
		text-align: center;
		font-size: 60rpx;
		font-family: Lato;
		font-weight: bold;
		color: #FFFFFF;
		padding-top: 20rpx;
		margin-bottom: 8rpx;
	}

	.gold-newest {
		width: 100%;
		height: auto;
		/* border: 1px solid red; */
		margin: 0rpx auto 8rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.7;
	}

	.gold-Decline {
		width: 100%;
		/* border: 1px solid red; */
		display: flex;
		justify-content: space-evenly;
	}

	.gold-item {
		width: 260rpx;
		height: 140rpx;
		/* border: 1px solid red; */
		line-height: 60rpx;
		text-align: center;
		padding-top: 30rpx;
	}

	.item-text {
		font-size: 40rpx;
		font-family: Lato;
		font-weight: bold;
		color: #FFFFFF;
	}

	.item-texttwo {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.7;
	}


	/* 金价走势 */
	.gold-trend {
		width: 100%;
		height: auto;
		border-top-left-radius: 35rpx;
		border-top-right-radius: 35rpx;
		/* border: 1px solid red; */
		position: absolute;
		top: 335rpx;
		background-color: #FFFFFF;
	}

	/* 金价走势标题 */
	.exclusive-title {
		width: 700rpx;
		height: 100rpx;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		line-height: 100rpx;
		clear: both;
	}

	.title-box {
		/* border: 1px solid red; */
		width: 8rpx;
		height: 30rpx;
		background: #3476F1;
		border-radius: 12rpx;
		margin-top: 36rpx;
		margin-right: 10rpx;
		/* float: left; */
		display: inline-block;
	}

	.title {
		/* border: 1px solid red; */
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		display: inline-block;
	}

	.title-log {
		/* border: 1px solid red; */
		width: 28rpx;
		height: 28rpx;
		margin-top: 36rpx;
	}

	/* 折线图 */
	.zxt {
		width: 700rpx;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 28rpx rgba(0, 0, 0, 0.05);
		opacity: 1;
		border-radius: 18rpx;
		margin: 0rpx auto;

		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.zhxiantu {
		width: 700rpx;
		height: 400rpx;
	}

	.xuanze {
		width: 620rpx;
		height: 52rpx;
		margin: 40rpx auto 30rpx;
		/* border: 1px solid red; */
		display: flex;
	}

	.fenlei {
		width: 100%;
		height: 52rpx;
		border: 1rpx solid #F3F3F3;
		text-align: center;
		line-height: 52rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.active {
		background: #3476F1;
		color: #FFFFFF;
	}

	/* 安全保障 */
	.security-title {
		width: 700rpx;
		height: 100rpx;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		display: flex;
		line-height: 100rpx;
		clear: both;
	}

	.security-box {
		width: 700rpx;
		height: 380rpx;
		background: #FFFFFF;
		margin: 0rpx auto;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
		border-radius: 18rpx;
		/* border: 1px solid red; */
	}

	.security-every {
		width: 100%;
		height: 180rpx;
		/* border: 1px solid red; */
		display: flex;
	}

	.every-item {
		width: 100%;
		height: 180rpx;
		/* border: 1px solid red; */
		text-align: center;
		padding-bottom: 10rpx;
	}

	.every-image {
		width: 94rpx;
		height: 94rpx;
		/* border: 1px solid red; */
		margin-top: 30rpx;
		margin-bottom: 10rpx;
	}

	.every-text {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.security-describe {
		width: 640rpx;
		height: 172rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.03);
		margin: 26rpx auto 24rpx;
		padding-top: 22rpx;
	}

	.describe {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 44rpx;
		color: #999999;
	}

	/* 信息披露*/
	.information {
		width: 700rpx;
		height: 114rpx;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		display: flex;
	}

	.information-item {
		width: 148rpx;
		height: 86rpx;
		/* border: 1px solid red; */
		text-align: center;
		padding-top: 28rpx;
	}

	.information-text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.informationActive {
		width: 54rpx;
		height: 8rpx;
		background: #3476F1;
		border-radius: 6rpx;
		margin: 10rpx auto 0rpx;
	}

	.informationText {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #3476F1;
	}

	/* 基本信息 */
	.essential-information {
		width: 700rpx;
		height: auto;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		border-radius: 18rpx;
	}

	.essential-titll {
		width: 642rpx;
		height: 88rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.03);
		/* border: 1px solid red; */
		margin: 0rpx auto;
	}

	.titll-text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 88rpx;
	}


	.essential-vice-titll {
		width: 642rpx;
		height: 88rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.03);
		margin: 0rpx auto;
		display: flex;
		/* border: 1px solid red; */
	}

	.vice-titll {
		width: 150rpx;
		height: 88rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		/* border: 1px solid red; */
		line-height: 88rpx;
	}

	.vice-text {
		width: 100%;
		height: 88rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: 30rpx;
		word-wrap: break-word;
		/* border: 1px solid red; */
		line-height: 88rpx;
	}

	.no-line {
		line-height: 2;
	}

	.agreement {
		width: 700rpx;
		height: auto;
		/* border: 1px solid red; */
		margin: 40rpx auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		border-radius: 18rpx;
	}

	.agreement-vice-titll {
		width: 642rpx;
		height: 88rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.03);
		margin: 0rpx auto;
		display: flex;
		/* border: 1px solid red; */
		justify-content: space-between;
		line-height: 88rpx;
	}

	.agreement-titll {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		/* border: 1px solid red; */
	}

	.agreement-image {
		width: 28rpx;
		height: 28rpx;
		/* border: 1px solid red; */
		margin-top: 30rpx;
	}

	/* 常见问题 */
	.problem-active {
		padding: 30rpx;
		/* border: 1px solid red; */
		width: 670rpx;
	}

	.problem {
		text-align: right;
		margin: 20rpx;
	}

	.problem-questions {
		width: auto;
		height: 88rpx;
		display: inline-block;
		background-color: #3476F1;
		padding: 0rpx 15rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 24rpx;
	}

	.problem-tips {
		width: 622rpx;
		height: auto;
		border: 1rpx solid #F1F1F1;
		padding: 15rpx;
		border-radius: 24rpx;
		color: #727272;
		font-size: 24rpx;
	}

	.tishi {
		width: 700rpx;
		margin: 30rpx auto;
		color: #999999;
	}

	.ts1 {
		font-size: 24rpx;
	}

	.ts2 {
		font-size: 20rpx;
	}

	/* 立即购买 */
	.purchase {
		width: 100%;
		height: 88rpx;
		background: #3476F1;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		margin-bottom: 80rpx;
	}

	.purchase2 {
		width: 100%;
		height: 88rpx;
		background: #999999;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		margin-bottom: 80rpx;
	}
</style>
